<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Node</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Node</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>
        The Node Utility provides an expressive way to collect, create,  and
        manipulate DOM nodes.  Each <code>Node</code> instance represents an underlying
        DOM node, and each <code>NodeList</code> represents a collection of DOM nodes.
    </p>

    <p>
        In addition to wrapping the basic DOM API and handling cross browser
        issues, <code>Node</code>s provide convenient methods for managing CSS classes,
        setting or animating styles, subscribing to events, updating or
        dynamically loading content, and lots more.
    </p>

    <p>
        <strong>Note:</strong> The <em><code>Y.get()</code>, <code>node.query()</code>, and
        <code>node.queryAll()</code> methods have been removed.  Use <code>Y.one()</code>,
        <code>node.one()</code>, and <code>node.all()</code> or include the
        "<a href="http://yuilibrary.com/yui/docs/api/modules/node-deprecated.html">node-deprecated</a>"
        module in your <code>use()</code> statement to restore them</em>.
    </p>

</div>

<h2 id="getting-started">Getting Started</h2>

<p>
To include the source files for Node and its dependencies, first load
the YUI seed file if you haven't already loaded it.
</p>

<pre class="code prettyprint">&lt;script src=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.4.1&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;</pre>


<p>
Next, create a new YUI instance for your application and populate it with the
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
YUI will automatically load any dependencies required by the modules you
specify.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Create a new YUI instance and populate it with the required modules.
YUI().use(&#x27;node&#x27;, function (Y) {
    &#x2F;&#x2F; Node is available and ready for use. Add implementation
    &#x2F;&#x2F; code here.
});</pre>


<p>
For more information on creating YUI instances and on the
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
documentation for the <a href="../yui/index.html">YUI Global object</a>.
</p>


<h2 id="node-using">Using Nodes</h2>

<p>
     <code>Node</code> is the interface for DOM operations in YUI 3.  The Node API is
     based on the standard DOM API, and provides additional sugar properties
     and methods that make common operations easier, and implementation code
     more concise.  Developers familiar with the standard DOM API will find
     Node instances to be very familiar.                                
</p>

<h3 id="using-node">Getting a Node</h3>

<pre class="code prettyprint">&#x2F;&#x2F; Use Y.one( [css selector string] )
var node = Y.one(&#x27;#main&#x27;);

&#x2F;&#x2F; Or pass an HTML element
var bodyNode = Y.one(document.body);</pre>


<p>
    The simplest way to get a <code>Node</code> instance is using your YUI instance's
    <code>one</code> method.  <code>Y.one</code> accepts either an existing DOM element or a CSS
    selector.  If a selector string is used, the first matching element is used.
    <a href="#nodelist">NodeLists</a> are also available for working with
    collections of <code>Node</code>s.
</p>

<p>
    <strong>Note:</strong> CSS3 selector support is not included by default
    with Node. Add support by including the "selector-css3" module in your
    <code>use()</code> statement.
</p> 

<h3 id="create">Creating Nodes and Modifying Content</h3>

<pre class="code prettyprint">&#x2F;&#x2F; Create a new Node
var item = Y.Node.create(&#x27;&lt;li id=&quot;step3&quot; class=&quot;highlight&quot;&gt;&lt;em&gt;Profit&lt;&#x2F;em&gt;&lt;&#x2F;li&gt;&#x27;);

&#x2F;&#x2F; Replace the content in a Node
Y.one(&quot;#hello&quot;).setContent(&quot;&lt;h1&gt;Hello, &lt;em&gt;World&lt;&#x2F;em&gt;!&lt;&#x2F;h1&gt;&quot;);

&#x2F;&#x2F; Append new markup inside a Node
bodyNode.append(&quot;&lt;p&gt;This is the end, beautiful friend, the end.&lt;&#x2F;p&gt;&quot;);</pre>


<p>
    <code>Node</code>s have methods for
    <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_append">appending</a>, 
    <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_prepend">prepending</a>, 
    <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_setContent">replacing</a>, and
    <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_insert">inserting</a>
    content. The static method
    <a href="http://yuilibrary.com/yui/docs/api/classes/Node.html#method_create"><code>Y.Node.create()</code></a>
    is provided to create new <code>Node</code>s that you want to work with a bit more
    before attaching them to the DOM.
</p>

<p>
    As noted in <a href="#node-methods">DOM Methods</a> below, the standard DOM
    API methods, such as <code>appendChild</code> and <code>insertBefore</code> are also available to
    manipulate the DOM structure.
</p>

<h3 id="node-properties">Accessing Node Properties</h3>

<pre class="code prettyprint">var imgNode = Y.one(&#x27;#preview&#x27;);
var labelNode = imgNode.get(&#x27;nextSibling&#x27;); &#x2F;&#x2F; Node instance

var bigSrc = thumbnail.get(&#x27;src&#x27;).slice(0, -4) + &#x27;-big.jpg&#x27;;

imgNode.set(&#x27;src&#x27;, bigSrc);
imgNode.set(&#x27;title&#x27;, thumbnail.get(&#x27;title&#x27;);
labelNode.setContent(thumbnail.get(&#x27;title&#x27;));</pre>

<p>
    Properties of the underlying DOM node are accessed via the <code>Node</code>
    instance's <code>set</code> and <code>get</code> methods.  For simple property types (strings,
    numbers, booleans), these pass directly to/from the underlying node, but
    properties that normally return DOM nodes return <code>Node</code> instances
    instead.
</p>


<h3 id="node-events">DOM Events</h3>

<pre class="code prettyprint">Y.one(&#x27;#demo&#x27;).on(&#x27;click&#x27;, function(e) {
    e.preventDefault();
    alert(&#x27;event: &#x27; + e.type + &#x27; target: &#x27; + e.target.get(&#x27;tagName&#x27;)); 
});</pre>


<p>
    Use the <code>on</code> method to add an event listener to a <code>Node</code> instance.  The
    event object passed as the first argument to each listener is an event
    facade that, like the Node API, normalizes browser differences and provides
    a standard API for working with DOM events based on the W3C standard.  All
    properties of the event object that would normally return DOM elements
    return <code>Node</code> instances.
</p>

<p>
    For more details, check out <a href="../event/index.html">the Event user
    guide</a>.
</p>

<h3 id="node-methods">DOM Methods</h3>

<pre class="code prettyprint">var tasklist = Y.one(&#x27;ul#tasklist&#x27;);
var item3 = tasklist.appendChild( Y.one(&#x27;#pending .item-3&#x27;) );

item3.addClass(&#x27;highlight&#x27;);</pre>


<p>
    The <code>Node</code> API provides all of the DOM methods you would expect, plus a
    few extras to help with common tasks.  As with properties and events, any
    methods that would normally return DOM nodes instead return <code>Node</code>
    instances.
</p>

<h3 id="nodelist">Working With Collections of Nodes</h3>

<p>
    <code>NodeList</code> is the class for working with groups of <code>Node</code>s.
</p>

<pre class="code prettyprint">var doneTasks = Y.all(&#x27;#tasklist .completed&#x27;);

&#x2F;&#x2F; NodeLists host most Node methods for simple iterative operations
doneTasks.removeClass(&#x27;highlight&#x27;);

&#x2F;&#x2F; or call each() to do more work on each Node
doneTasks.each(function (taskNode) {
    taskNode.transition({ opacity: 0 }, function () {
        completedTasklist.appendChild(this);
    });
});</pre>


<p>
    The <code>Y.all</code> method is the simplest way to get a <code>NodeList</code>, but throughout
    the library, any property or method that would return a collection of HTML
    elements will return a <code>NodeList</code>.
</p>

<pre class="code prettyprint">var nodelist = taskList.get(&#x27;childNodes&#x27;);</pre>


<p>
    The <code>NodeList</code> provides a <code>Node</code>-like interface for manipulating multiple
    <code>Node</code>s through a single interface. The <code>NodeList</code> API is a pared-down
    version of the <code>Node</code> API for simple operations, plus common <code>Array</code>
    methods such as
    <a href="http://yuilibrary.com/yui/docs/api/classes/NodeList.html#method_slice"><code>slice()</code></a> and
    <a href="http://yuilibrary.com/yui/docs/api/classes/NodeList.html#method_pop"><code>pop()</code></a> for
    modifying the internal list of wrapped <code>Node</code>s, and some general purpose
    iteration methods such as
    <a href="http://yuilibrary.com/yui/docs/api/classes/NodeList.html#method_each"><code>each()</code></a> and
    <a href="http://yuilibrary.com/yui/docs/api/classes/NodeList.html#method_some"><code>some()</code></a>.
</p>


<h3 id="node-query">Query a Node's Descendants</h3>

<pre class="code prettyprint">var node = Y.one(&#x27;#demo&#x27;);

var firstPara = node.one(&#x27;p&#x27;);

if (firstPara) { &#x2F;&#x2F; might be null
    &#x2F;&#x2F; adds &quot;bar&quot; to the first paragraph descendant of #demo
    firstPara.addClass(&#x27;intro&#x27;);
}

&#x2F;&#x2F; adds class &quot;syntax-highlight&quot; to all &lt;pre&gt; descendants of #demo
node.all(&#x27;pre&#x27;).addClass(&#x27;syntax-highlight&#x27;);</pre>


<p>
    Like <code>Y.one()</code> and <code>Y.all()</code>, <code>Node</code> instances have <code>one()</code> and <code>all()</code>
    methods for querying their descendants.
</p>

<p>
    Using selectors to capture descendants is faster and more convenient than
    relying on DOM properties such as <code>childNodes</code> and <code>nextSibling</code> since you
    don't have to worry about working around text nodes or recursing into
    element subtrees.
</p>
<p>
    Using <code>one()</code> and <code>all()</code> from a <code>Node</code> rather than <code>Y</code> can aid performance
    in large pages as well, because <code>Y.one()</code> and <code>Y.all()</code> always query from
    the <code>document</code>, which will scan a lot more elements.
</p>

<p>
    For more information on selector queries, see the following W3C
    specifications:
</p> 

<ul>
    <li><a href="http://www.w3.org/TR/css3-selectors/">CSS Level 3 Selectors</a></li>
    <li><a href="http://www.w3.org/TR/selectors-API/">Selectors API</a></li>
</ul>

<p>
    <strong>Note:</strong> CSS3 selector support is not included by default
    with Node, you will need to include the "selector-css3" module for CSS3
    support.
</p> 


<h2 id="node-aria">ARIA Support</h2>

<p>
    The Node interface has support for <a
    href="http://www.w3.org/TR/wai-aria/">ARIA</a>.  When used with Node's
    built-in support for CSS selector queries, it is easy to both apply and
    manage a Node's <a href="http://www.w3.org/TR/wai-aria/#roles">roles</a>,
    <a href="http://www.w3.org/TR/wai-aria/#supportedState">states and
    properties</a>.
<p>

<p>
    The ARIA Roles, States and Properties enhance the semantics of HTML,
    allowing developers to more accurately describe the intended purpose of a
    region of a page, or a DHTML widget, thereby improving the user experience
    for users of assistive technology, such as screen readers.
</p>

<p>
    Apply any of the ARIA Roles, States and Properties via the <code>set</code> method.
    For example, to apply the role of <a
    href="http://www.w3.org/TR/wai-aria/#toolbar"><code>toolbar</code></a> to a <code>&lt;div&gt;</code>
    with an id of "toolbar":
</p>

<pre class="code prettyprint">var node = Y.one(&#x27;#toolbar&#x27;).set(&#x27;role&#x27;, &#x27;toolbar&#x27;);</pre>


<p>
    Node's built-in support for CSS selector queries, method chaining, and
    ability to set multiple attributes on a single Node instance makes it
    especially easy to apply the ARIA Roles, States, and Properties when
    building DHTML widgets with a large subtree.  For example, when building a
    menubar widget it is necessary to apply a role of
    <a href="http://www.w3.org/TR/wai-aria/#menubar"><code>menubar</code></a> to the root
    DOM element representing the menubar, and the role of
    <a href="http://www.w3.org/TR/wai-aria/#menu"><code>menu</code></a> to the root DOM
    element representing each submenu.  Additionally, as each submenu is hidden
    by default, the
    <a href="http://www.w3.org/TR/wai-aria/#aria-"><code>aria-hidden</code></a> state will
    need to be applied to each submenu as well.  The Node interface makes it
    possible to do all of this in one line of code:
</p>

<pre class="code prettyprint">Y.one(&#x27;#root&#x27;).set(&#x27;role&#x27;, &#x27;menubar&#x27;).all(&#x27;.menu&#x27;).setAttrs({ role: &#x27;menu&#x27;, &#x27;aria-hidden&#x27;: true });</pre>


<h2 id="node-migration">Migration Table</h2>

<p>
    The following table is included to help users migrating from YUI 2.  Most
    of the functionality from <code>YAHOO.util.Dom</code> is available via <code>Node</code>.
</p>

<p>
    <strong>Note</strong> In the snippets below, <code>myNode</code> is an instance of
    <code>Node</code>.  Methods that normally would return DOM nodes now return Node
    instances.
</p>

<table class="yui-table">
<thead>
    <tr>
        <th>2.x <code>YAHOO.util.???</code></th>
        <th>3.0</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
<pre class="code prettyprint">Dom.get(&#x27;elementId&#x27;);</pre>

        </td>
        <td>
<pre class="code prettyprint">Y.one(&#x27;#elementId&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getElementsBy(someFilterFunction);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.all(&#x27;selectorString&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getElementsByClassName(&#x27;highlight&#x27;);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.all(&#x27;.highlight&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getChildren(el);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.get(&#x27;children&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getChildrenBy(someFilterFunction);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.all(&#x27;selectorString&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getFirstChild(parentEl);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.one(&#x27;*&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getFirstChildBy(someFilterFunction);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.one(&#x27;&gt; selectorString&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getLastChild(el);
Dom.getLastChildBy(someFilterFunction);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.get(&#x27;children&#x27;).slice(-1).item(0);
&#x2F;&#x2F; OR target the node with a selector
myNode.one(&#x27;&gt; selector:last-of-type&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getNextSibling(el);
Dom.getNextSiblingBy(someFilterFunction);
Dom.getPreviousSibling(el);
Dom.getPreviousSiblingBy(someFilterFunction);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.next();
myNode.next(&#x27;selectorString&#x27;);
myNode.previous();
myNode.previous(&#x27;selectorString&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getAncestorBy(someFilterFunction);
Dom.getAncestorByClassName(&#x27;highlight&#x27;);
Dom.getAncestorByTagName(&#x27;pre&#x27;);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.ancestor(someFilterFunction);
myNode.ancestor(&#x27;.highlight&#x27;);
myNode.ancestor(&#x27;pre&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.isAncestor(ancestorEl, el);</pre>

        </td>
        <td>
<pre class="code prettyprint">ancestorNode.contains(myNode);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.insertAfter(el, afterEl);
Dom.insertBefore(el, beforeNode);</pre>

        </td>
        <td>
<pre class="code prettyprint">afterNode.insert(myNode, &#x27;after&#x27;);
beforeNode.insert(myNode, &#x27;before&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.addClass(&#x27;highlight&#x27;);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.addClass(&#x27;highlight&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.removeClass(el, &#x27;highlight&#x27;);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.removeClass(&#x27;highlight&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.replaceClass(el, &#x27;high&#x27;, &#x27;low&#x27;);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.replaceClass(&#x27;high&#x27;, &#x27;low&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.hasClass(el, &#x27;highlight&#x27;);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.hasClass(&#x27;highlight&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getStyle(el, &#x27;backgroundColor&#x27;);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.getStyle(&#x27;backgroundColor&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.setStyle(el, &#x27;borderColor&#x27;, &#x27;#C0FFEE&#x27;);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.setStyle(&#x27;borderColor&#x27;, &#x27;#C0FFEE&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getXY(el);
Dom.getX(el);
Dom.getY(el);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.getXY();
myNode.getX();
myNode.getY();</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.setXY(el, [ 500, 300 ]);
Dom.setX(el, 500);
Dom.setY(el, 300);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.setXY([ 500, 300 ]);
myNode.setX(500);
myNode.setY(300);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.inDocument(el);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.inDoc();</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.batch(elementArray,
    Dom.addClass, &#x27;highlight&#x27;);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNodelist.addClass(&#x27;highlight&#x27;);
&#x2F;&#x2F; OR
myNodelist.each(function (node) {
    node.addClass(&#x27;highlight&#x27;)
});
&#x2F;&#x2F; OR
Y.Array.each(myNodelist, function (node) {
    node.addClass(&#x27;highlight&#x27;);
});</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.generateId();</pre>

        </td>
        <td>
<pre class="code prettyprint">Y.guid();</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getViewportHeight();
Dom.getViewportWidth();</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.get(&#x27;winHeight&#x27;);
myNode.get(&#x27;winWidth&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getDocumentHeight();
Dom.getDocumentWidth();</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.get(&#x27;docHeight&#x27;);
myNode.get(&#x27;docWidth&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getClientRegion();</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.get(&#x27;viewportRegion&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getRegion(el);</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.get(&#x27;region&#x27;);</pre>

        </td>
    </tr>
    <tr>
        <td>
<pre class="code prettyprint">Dom.getDocumentScrollLeft();
Dom.getDocumentScrollTop();</pre>

        </td>
        <td>
<pre class="code prettyprint">myNode.get(&#x27;docScrollX&#x27;);
myNode.get(&#x27;docScrollY&#x27;);</pre>

        </td>
    </tr>
</tbody>
</table>
</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#getting-started">Getting Started</a>
</li>
<li>
<a href="#node-using">Using Nodes</a>
<ul class="toc">
<li>
<a href="#using-node">Getting a Node</a>
</li>
<li>
<a href="#create">Creating Nodes and Modifying Content</a>
</li>
<li>
<a href="#node-properties">Accessing Node Properties</a>
</li>
<li>
<a href="#node-events">DOM Events</a>
</li>
<li>
<a href="#node-methods">DOM Methods</a>
</li>
<li>
<a href="#nodelist">Working With Collections of Nodes</a>
</li>
<li>
<a href="#node-query">Query a Node's Descendants</a>
</li>
</ul>
</li>
<li>
<a href="#node-aria">ARIA Support</a>
</li>
<li>
<a href="#node-migration">Migration Table</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Using selectors and property accessors with Node.">
                                        <a href="properties.html">Set and Get Properties</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using DOM methods with Node.">
                                        <a href="dom-node.html">DOM Methods</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Listening for DOM events with Node instances.">
                                        <a href="events.html">Handling DOM Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="NodeList provides Node functionality for multiple nodes.">
                                        <a href="nodelist.html">NodeList</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using a single event listener to handle events on multiple nodes.">
                                        <a href="node-evt-delegation.html">Delegating Node Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to position an element in page coordinates.">
                                        <a href="node-xy.html">Node Positioning</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to set styles and get style information.">
                                        <a href="node-style.html">Node Styling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to insert content into a Node.">
                                        <a href="node-insert.html">Adding Node Content</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to show and hide a Node.">
                                        <a href="node-view.html">Showing and Hiding</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Use the Event Utility to attach simple DOM event handlers.">
                                        <a href="../event/basic-example.html">Simple DOM Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating an accessible toolbar using the Focus Manager Node Plugin and Node&#x27;s support for the WAI-ARIA Roles and States.">
                                        <a href="../node-focusmanager/node-focusmanager-1.html">Accessible Toolbar</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event&#x27;s delegation support and mouseenter event, along with the Overlay widget and Node&#x27;s support for the WAI-ARIA Roles and States.">
                                        <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use IO to request XML data from a remote web service.">
                                        <a href="../io/weather.html">Request XML data from Yahoo! Weather</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
                                        <a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Example Photo Browser application.">
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
                                        <a href="../dd/portal-drag.html">Portal Style Example</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
